<template>
  <div class="repairAndAdd">
    <el-form :model="user" ref="user" label-width="100px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="6" :offset="9">
          <el-form-item
            label="用户姓名"
            prop="name"
            :rules="[
              { required: true, message: '用户姓名不能为空'},
            ]"
          >
            <el-input type="text" v-model.number="user.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="9">
          <el-form-item
            label="联系电话"
            prop="phone"
            :rules="[
              { required: true, message: '联系电话不能为空'},
              { type: 'number', message: '联系必须为数字值'},
           
            ]"
          >
            <el-input type="text" v-model.number="user.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="9">
          <el-form-item
            label="居住地址"
            prop="address"
            :rules="[
              { required: true, message: '居住地址不能为空'},
            ]"
          >
            <el-input type="text" v-model.number="user.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="9">
          <el-form-item
            label="身份证号"
            prop="idCard"
            :rules="[
              { required: true, message: '身份证号不能为空'},
              { type: 'number', message: '身份证号必须为数字值'},
           
            ]"
          >
            <el-input type="text" v-model.number="user.idCard" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :offset="10">
      <el-form-item>
        <el-button type="primary" @click="submitForm(user)">提交</el-button>
        <el-button @click="resetForm('user')">重置</el-button>
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
    name: 'RepairAndAdd',
    data(){
        return{
            user:{
                name:'',
                phone:'',
                address:'',
                idCard:'',
            }
        }
    },
    methods:{
        //报装服务
        submitForm(){
            console.log(this.user);
            this.$http.get("/user/kb",{params:{name:this.user.name,address:this.user.address,phone:this.user.phone,idCard:this.user.idCard}})
            .then((result) => {
              console.log(result); 
              if(result.data.status){
                alert("报装服务成功，请耐心等待工作人员联系您！！！");
                this.$router.push("/onlineServer");
              }else{
                alert("报装服务失败，系统繁忙，请稍后再试");
              }
            }).catch((err) => {
              console.error(err);
            });
        },
        //重置
        resetForm(user){
            this.$refs[user].resetFields();
        }
    }
}
</script>